//只是内容主题组件

require('../styles/content.scss')
import React from 'react'

function Top(props) {
  const list = props.list
    const listItems = list.map((item,index) => {
      return <a className="listItem" key={index}>
        {item}
      </a>
    })
  return (
    <div className='top'>
      <span className="title">
        <a>{props.title}</a>
      </span>
      <div className="list">
        {listItems}
      </div>
      <span className='fr more'>
        <a>更多</a>
        <i></i>
      </span>
    </div>
  )
}

function OneList(props) {
  const list = props.list
  const listItem = list.map((item,index) => {
    return <li key={index} className="listItem fl">
      <img src={item.url}/>
      <a className='discoverA' href={item.goto}></a>
      <div className="bottom">
        <span className="one"></span>
        <span className="two">{item.num}</span>
        <a href="#"></a>
      </div>
      <p>
        <a>{item.text}</a>
      </p>
    </li>
  })
  return (
    <ul className="list clearfix">
      {listItem}
    </ul>
  )
}

class Content extends React.Component{
  constructor(props) {
    super(props)
    this.state={
      list:['华语','流行','摇滚','民谣','电子'],
      firstTitle:'热门推荐',
      secondTitle:'新碟上架',
      threedTitle:'榜单',
      oneList:[
        {url:'../images/1.jpg',text:'当古典音乐遇上另类演绎，妙趣横生',goto:'#',num: '104万'},
        {url:'../images/2.jpg',text:'当古典音乐遇上另类演绎，妙趣横生',goto:'#',num: '74万'},
        {url:'../images/3.jpg',text:'当古典音乐遇上另类演绎，妙趣横生',goto:'#',num: '559万'},
        {url:'../images/4.jpg',text:'当古典音乐遇上另类演绎，妙趣横生',goto:'#',num: '9978'},
        {url:'../images/5.jpg',text:'当古典音乐遇上另类演绎，妙趣横生',goto:'#',num: '723万'},
        {url:'../images/6.jpg',text:'当古典音乐遇上另类演绎，妙趣横生',goto:'#',num: '85997'},
        {url:'../images/7.jpg',text:'当古典音乐遇上另类演绎，妙趣横生',goto:'#',num: '325万'},
        {url:'../images/8.jpg',text:'当古典音乐遇上另类演绎，妙趣横生',goto:'#',num: '10万'}
      ]
    }
  }
  render() {
    return (
      <div className="ContentBox clearfix">
        <div className='left fl'>
          <Top list={this.state.list} title={this.state.firstTitle}></Top>
          <div className="partOne part">
            <OneList list={this.state.oneList}></OneList>
          </div>
          <Top list={[]} title={this.state.secondTitle}></Top>
          <div className="partTow part"></div>
          <Top list={[]} title={this.state.threedTitle}></Top>
          <div className="partThree part"></div>
        </div>
        <div className='right fl'></div>
      </div>
    )
  }
}


export default Content